<template>
	<tm-fullView>

		<tm-menubars title="lottie动画" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="flex-top-center">
		
			<tm-lottie :height="650" ref="lottie" url="https://jx2d.cn/web/readLottieJson/?key=test"></tm-lottie>
			</view>
		<tm-sheet :shadow="24">
			<tm-button @click="$refs.lottie.play()" :shadow="0" size="m" theme="grey" text>播放</tm-button>
			<tm-button @click="$refs.lottie.pause()" :shadow="0" size="m" theme="grey" text>暂停</tm-button>
			<tm-button @click="$refs.lottie.stop()" :shadow="0" size="m" theme="grey" text>停止</tm-button>
			<tm-button @click="$refs.lottie.setDirection(-1)" :shadow="0" size="m" theme="grey" text>反向播放</tm-button>
			<tm-button @click="$refs.lottie.setDirection(1)" :shadow="0" size="m" theme="grey" text>顺序播放</tm-button>
			<tm-menu @change="reloadAni" direction="top" :black="true" :list="['官方logo动画', '测试人物动画', '数据空动画', '搜索空', '爱情']">
				<tm-button icon="icon-sort-down" size="m" :shadow="0" text>选择其它动画示例</tm-button>
			</tm-menu>
			<view class="py-32 text-size-s text-grey">
				<view :class="$tm.vx.state().tmVuetify.black ? ' bk' : ''" class="py-24 border-b-1 border-t-1">
					说明：如果弹出的菜单被动画盖住属于正常，因为原生级别高于我的组件，不影响你选择动画示例。
				</view>
				<view class="text-primary pt-24">了解和制作：http://airbnb.io/lottie</view>
				<view class="text-primary">免费动画下载：https://lottiefiles.com/</view>
			</view>
		</tm-sheet>
	</tm-fullView>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmMenu from "@/tm-vuetify/components/tm-menu/tm-menu.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmLottie from "@/tm-vuetify/components/tm-lottie/tm-lottie.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmMenu,tmButton,tmLottie},
	data() {
		return {
			jsonList: [
				'https://jx2d.cn/web/readLottieJson/?key=logo',
				'https://jx2d.cn/web/readLottieJson/?key=test',
				'https://jx2d.cn/web/readLottieJson/?key=empty',
				'https://jx2d.cn/web/readLottieJson/?key=search-empty',
				'https://jx2d.cn/web/readLottieJson/?key=love'
			]
		};
	},
	async onReady() {},
	mounted() {
		// this.importImg()
	},
	methods: {
		async reloadAni(e) {
			
			await this.$refs.lottie.registerAnimation(this.jsonList[e.index]);
			
			
		},
		importImg(){
			// let listimg = [];
			// for (var i = 0; i < 20; i++) {
			// 	listimg.push(require("./noGuardian/images/img_"+i+".png"))
			// }
			let t = this;
			uni.request({
				url: 'https://kuoyouapp.oss-cn-beijing.aliyuncs.com/lottie/noGuardian/data.json',
				async success(e) {
					// console.log(e.data)
					let jsonp = e.data;
					let jsonpas = jsonp.assets.map(el=>{
						
						if(el.id=="image_19"){
								el.p=""
							el.u = "https://kuoyouapp.oss-cn-beijing.aliyuncs.com/pic/1652799546444134.jpg"
						}else{
						
							el.u = "../../static/images/"
						}
						return el
					})
					console.log(jsonpas)
					jsonp.assets = jsonpas
					
					await t.$refs.lottie.registerAnimation(jsonp);
				}
			})
		},
		test(){
			
		}
	}
};
</script>

<style lang="scss"></style>
